<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../css/info-list.css"/><!--资讯列表-->

    <title>我的中心</title>
    <style>

        .placeholder-top {
            background: rgba(255, 255, 255, 0);
            z-index: 1;
        }

        .index-user-head {
            height: 4.4rem;
            width: 7.5rem;
            /*background:linear-gradient(180deg,rgba(44,104,255,1) 0%,rgba(68,114,251,1) 100%);*/
        }

        .index-user-img {
            min-height: 4.4rem;
        }

        .index-user-img img {
            width: 100%;
            height: 4.4rem;
        }

        .index-user-area {
            padding: 0 0.32rem;
            bottom: 0;
            width: 7.5rem;
        }

        .index-user-tx {
            height: 1.12rem;
            width: 1.12rem;
            border-radius: 5rem;
            border: 1px solid #FFFFFF;
        }

        .index-user-tx img {
            border-radius: 5rem;
        }

        .index-user-dl {
            color: white;
        }

        .index-user-desc {
            color: rgba(255, 255, 255, 0.5);
            margin-top: 0.14rem;
        }

        .index-user-enter {
            height: 0.5rem;
            width: 0.5rem;
            text-align: right
        }

        .index-user-enter span {
            color: rgba(255, 255, 255, 0.5)
        }

        .index-user-top {
            width: 100%;
            border-radius: 6px 6px 0px 0px;
            margin-top: 0.58rem;
            height: 1.4rem;
            background: #5C85FF;
        }

        .index-user-icon {
            height: 0.5rem;
            width: 0.5rem;
        }

        .index-user-news {
            width: 0.16rem;
            height: 0.24rem;

            border-radius: 10px;
            left: 0.27rem;
            top: -0.1rem;
            background: #EC3E33;
            padding: 0 0.08rem;
            color: white;
            border: 0.04rem solid #FFFFFF
        }

        .index-user-set {
            color: white;
        }

        .index-user-wrap {
            padding: 0 0.32rem;
            background: white
        }

        .index-user-item {
            padding: 0.36rem 0 0.34rem 0;
            border-bottom: 1px solid #F2F2F2;
            color: #222222
        }

        .index-user-fh {
            height: 0.4rem;
            width: 0.4rem;
            text-align: right
        }

        .index-user-return {
            color: rgba(153, 153, 153, 0.6);
        }

        .index-user-cache {
            color: rgba(34, 34, 34, 0.45)
        }

        .index-user-login {
            padding: 0.36rem 0;
            background: white;
            width: 100%;
            color: #2C68FF;
            margin-top: 0.16rem;
            margin-bottom: 0.5rem
        }
    </style>
</head>
<body>

<div class="flex-column h-100-p ff400">
    <!--状态栏-->
    <div class="placeholder-top pos-f">
        <!--状态栏-->
        <div class="status-bar pos-f"></div>
        <!--标题栏-->
        <div class="nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()" style="color: #FFFFFF;">
                <!--<span class="iconfont iconfanhui1 fs16"></span>-->
            </div>
            <div class="center-bar fs16 ff500 line1"></div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <div class="flex-column flex-1 scoll-y">
        <div class="index-user-head pos-r flex-column">
            <div class="index-user-img"><img src="../images/user/user-center.png" alt=""/></div>
            <div class="pos-a flex-column index-user-area">
                <div class="index-user-jump flex-row align-items-center">
                    <div class="index-user-tx mr15">
                        <img class="w-100-p h-100-p" src="../images/user/user-comment.png" alt=""/>
                    </div>
                    <div class="flex-row align-items-center justify-content-between flex-1 index-user-opt">
                        <div class="flex-column">
                            <div class="index-user-dl ff500 fs22">登陆/注册</div>
                            <div class="index-user-desc fs13">一站式资管科技解决方案的资管平台</div>
                        </div>
                        <div class="index-user-enter">
                            <span class="iconfont iconfanhui fs10"></span>
                        </div>
                    </div>
                </div>

                <!--我的消息、我的收藏、消息设置-->
                <div class="index-user-top flex-row justify-content-around">
                    <div class="flex-column align-items-center  justify-content-center" onclick="jumpPage(7)">
                        <div class="pos-r">
                            <img class="index-user-icon" src="../images/user/user-news.png"/>
                            <div class="index-user-red"></div>
                        </div>
                        <div class="index-user-set fs12">我的消息</div>
                    </div>
                    <div class="flex-column align-items-center pos-r justify-content-center" onclick="jumpPage(8)">
                        <div>
                            <img class="index-user-icon" src="../images/user/user-col.png"/>
                        </div>
                        <div class="index-user-set fs12">我的收藏</div>
                    </div>
                    <div class="flex-column align-items-center pos-r justify-content-center" onclick="jumpPage(9)">
                        <div>
                            <img class="index-user-icon" src="../images/user/news-set.png"/>
                        </div>
                        <div class="index-user-set fs12">消息设置</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="index-user-wrap flex-column">
            <div class="index-user-item flex-row align-items-center justify-content-between" onclick="jumpPage(0)">
                <div class="flex-row align-items-center ">
                    <div>
                        <span class="iconfont icon11 fs20"></span>
                    </div>
                    <div class="fs15 ml20">账户与安全</div>
                </div>
                <div class="index-user-fh">
                    <span class="index-user-return iconfont iconfanhui fs9"></span>
                </div>
            </div>
            <div class="index-user-item flex-row align-items-center justify-content-between" onclick="jumpPage(1)">
                <div class="flex-row align-items-center ">
                    <div>
                        <span class="iconfont iconbangzhuzhongxin fs20"></span>
                    </div>
                    <div class="fs15 ml20">帮助中心</div>
                </div>
                <div class="index-user-fh">
                    <span class="index-user-return iconfont iconfanhui fs9"></span>
                </div>
            </div>


            <div class="index-user-item flex-row align-items-center justify-content-between" onclick="jumpPage(2)">
                <div class="flex-row align-items-center ">
                    <div>
                        <span class="iconfont iconguanyuwomen-01 fs20"></span>
                    </div>
                    <div class="fs15 ml20">关于我们</div>
                </div>
                <div class="index-user-fh">
                    <span class="index-user-return iconfont iconfanhui fs9"></span>
                </div>
            </div>


            <div class="index-user-item flex-row align-items-center justify-content-between" onclick="jumpPage(3)">
                <div class="flex-row align-items-center ">
                    <div>
                        <span class="iconfont iconfenxianghaoyou fs20"></span>
                    </div>
                    <div class="fs15 ml20">分享好友</div>
                </div>
                <div class="index-user-fh">
                    <span class="index-user-return iconfont iconfanhui fs9"></span>
                </div>
            </div>

            <div class="index-user-item flex-row align-items-center justify-content-between" onclick="jumpPage(4)">
                <div class="flex-row align-items-center ">
                    <div>
                        <span class="iconfont iconyijianfankui fs20"></span>
                    </div>
                    <div class="fs15 ml20">意见反馈</div>
                </div>
                <div class="index-user-fh">
                    <span class="index-user-return iconfont iconfanhui fs9"></span>
                </div>
            </div>


            <div class="index-user-item flex-row align-items-center justify-content-between" onclick="clearCache()">
                <div class="flex-row align-items-center ">
                    <div>
                        <span class="iconfont iconqingchuhuancun1 fs20"></span>
                    </div>
                    <div class="fs15 ml20">清除缓存</div>
                </div>
                <div class="index-user-cacheNum flex-row align-items-center">
                </div>
            </div>
        </div>
        <div class="index-user-login ta-center" onclick="jsBridge.logOut()">退出登录</div>
    </div>

</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../js/dict.js"></script>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/checkJsBridge.js"></script>
<script src="../js/utils.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../js/date.js"></script>
<script src="../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../js/template.js"></script>
<script src="../js/api.js"></script>


<script>
    let pm = {
      isLogin: false,
      //我的消息是否需要小红点    false :不展示小红点    true :展示小红点
      isMsgRed: false
    }

    function initPage(params) {
      //状态栏自适应
      Utils.sbhAdaptive()
      reLoadPage()
    }

    /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
    function startPage(params) {
      reLoadPage()
    }

    function reLoadPage() {
      loadView()
      getCache()
      addRed()
    }

    function loadView() {
      isLogin = !user.isGuest
      const login = $('.index-user-login')
      const opt = $('.index-user-jump')
      if (isLogin) {
        $('.index-user-dl').html(user.username)
        // 移除点击登陆属性
        opt.attr('onclick', 'jumpPage(5)')
        login.show()
      } else {
        $('.index-user-dl').html('登陆/注册')
        opt.attr('onclick', 'jsBridge.openLogin()')
        login.hide()
      }
    }

    // 我的页面跳转
    function jumpPage(num) {
      switch (num) {
      case 0:  //账户与安全
        if (isLogin) {
          jsBridge.openWindow('html/user/acc-sec.html', {}, {noBar: false})
        } else {
          Utils.goLogin()
        }
        break
      case 1:  //帮助中心
        jsBridge.openWindow('html/user/help-center.html', {}, {noBar: false})
        break
      case 2: // 关于我们
        jsBridge.openWindow('html/user/about.html', {}, {noBar: false})
        break
      case 3: // 分享好友
        jsBridge.openWindow('html/user/share.html', {}, {noBar: false})
        break
      case 4: // 意见反馈
        if (isLogin) {
          jsBridge.openWindow('html/user/feedback.html', {}, {noBar: false})
        } else {
          Utils.goLogin()
        }
        break
      case 5: // 编辑个人资料
        if (isLogin) {
          jsBridge.openWindow('html/user/edit-personal.html', {}, {noBar: false})
        } else {
          Utils.goLogin()
        }
        break
      case 6: //清除缓存
        break
      case 7: //我的消息
        if (isLogin) {
          jsBridge.openWindow('html/user/message-home.html', {}, {noBar: false})
        } else {
          Utils.goLogin()
        }
        break
      case 8: //我的收藏
        if (isLogin) {
          jsBridge.openWindow('html/user/collection.html', {}, {noBar: false})
        } else {
          Utils.goLogin()
        }
        break
      case 9: //消息设置
        if (isLogin) {
          jsBridge.openWindow('html/user/news-set.html', {}, {noBar: false})
        } else {
          Utils.goLogin()
        }
        break
      }
    }

    //获取当前缓存大小
    function getCache() {
      jsBridge.getCache().then(data => {
        htmlStr = `<span class="mr10 index-user-cache">${data.cache}</span>
                    <span class="index-user-return iconfont iconfanhui fs9"></span>`
        $('.index-user-cacheNum').html(htmlStr)
      })
    }

    //清除缓存
    function clearCache() {
      jsBridge.clearCache().then(data => {
        if (data.isSuccess) {
          htmlStr = `<span class="mr10 index-user-cache">0KB</span>
                    <span class="index-user-return iconfont iconfanhui fs9"></span>`
          $('.index-user-cacheNum').html(htmlStr)
        } else {
          getCache()
        }
      })
    }

    //是否有未读消息，我的消息小红点添加
    function addRed() {
      pm.isMsgRed = false

      //获取当前用户反馈消息中已答复未阅读的数量
      getUnreadNums()

    }


    //获取资讯与公告总体阅读状态
    function getMsgReadStatus() {
      jsBridge.getMsgReadStatus().then(data => {
        pm.infoIsRead = data.infoIsRead
        pm.sysNoticeIsRead = data.sysNoticeIsRead
        if (pm.infoIsRead) {
          pm.isMsgRed = true
        } else if (pm.sysNoticeIsRead) {
          pm.isMsgRed = true
        }
        if (pm.isMsgRed) {
          let htmlStr = `<div class="index-user-news pos-a fs10 ff500"></div>`
          $('.index-user-red').html(htmlStr)
        } else {
          let htmlStr = ``
          $('.index-user-red').html(htmlStr)
        }
      })
    }

    //获取当前用户反馈消息中已答复未阅读的数量
    function getUnreadNums() {
      Server.indexUser.getUnreadNums().then(
        function (data) {
          //获取资讯与公告总体阅读状态
          getMsgReadStatus()
          let unreadNums = data.unreadNums
          if (unreadNums > 0) {
            pm.isMsgRed = true
          }
        }
      ).catch(jsBridge.log)
    }

</script>
</html>
<!--    显示数字小红点时的格式
        .index-user-news {
            border-radius: 10px;
            line-height: 0.26rem;
            left: 0.2rem;
            top: -0.14rem;
            background: #EC3E33;
            padding: 0 0.08rem;
            color: white;
            height: 0.32rem;
            border: 0.04rem solid #FFFFFF
        }

-->
